<template>
	<view>
		<!-- <view class="input-text u-flex u-m-l-0" @click.stop="selectedValue = true;">
			<text>{{name}}</text>
			<view class="u-flex-1"></view>
			<u-icon name="arrow-right" class="tips-txt"></u-icon>
		</view> -->
		<u-picker 
			v-model="selectedValue" 
			range-key="name" 
			:default-selector="[0]"
			:range="dataList" 
			mode="selector" 
			@confirm="confirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dataList: [],
				selectedValue: this.value, // 使用本地 data 属性来保存选中的值
				// name:"点击选择站点"
			}
		},
		computed: {
			...mapState({
				franchiseId: state => state.franchiseId
			})
		},
		watch:{
			value(val){
				console.log('value',val)
				this.selectedValue = val
			},
			selectedValue(val){
				console.log('selectedValue',val)
				if(!val){
					this.$emit('close',false)
				}
			}
		},
		mounted() {
			this.getDataList()
		},
		methods: {
			getDataList(){
				this.$u.post('/Store/List',{
					"pageIndex": 1,
					"pageSize": 999,
					"franchiseId": this.franchiseId
				}).then((res) => {
					this.dataList = res.rows;
				}).catch((err) => {
					
				})
			},
			confirm(index){
				// this.name = this.dataList[index].name
				this.$emit('confirm',this.dataList[index])
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .input-text {
	// 	border: 1px solid $u-border-color;
	// 	border-radius: 5px;
	// 	height: 70rpx;
	// 	margin: 20rpx 0;
	// 	padding-right: 20rpx;
	// 	padding-left: 20rpx;
	// 	line-height: 70rpx;
	// 	width: 100%;
	// 	margin-left: 30rpx;
	// 	input{
	// 		height: 70rpx;
	// 	}
	// }
</style>
